<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { upload_excel } from '../server/upload_excel';
import * as XLSX from 'xlsx';

const route = useRoute();
const fileId = route.query.id;
let table_data = ref([]);

function loadFile(id) {
    upload_excel.downloadExcel(id).then(async (res) => {
        for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];
            // res.data[i].subItem = await;
            let subRes = await upload_excel.loadSubItem(item.id);
            res.data[i].subItem = subRes.data;
        }
        table_data.value = res.data;
        console.log(table_data);
    }).catch((err) => {
        console.error(err);
    });
}

function exportTableToExcel() {
    let excel_data = table_data.value;
    const data = [];
    const merges = [];
    let col_num = 1;

    // 填充表头
    data.push(['序号', '实施机构', '事项类别', '事项名称', '设定依据', '二级序号', '二级事项名称', '部门']);
    // 填充数据表
    for (let i = 0; i < excel_data.length; i++) {
        let item = excel_data[i];
        let merges_item = [
            { s: { r: col_num, c: 0 }, e: { r: col_num+item.subItem.length-1, c: 0 } },
            { s: { r: col_num, c: 1 }, e: { r: col_num+item.subItem.length-1, c: 1 } },
            { s: { r: col_num, c: 2 }, e: { r: col_num+item.subItem.length-1, c: 2 } },
            { s: { r: col_num, c: 3 }, e: { r: col_num+item.subItem.length-1, c: 3 } },
            { s: { r: col_num, c: 4 }, e: { r: col_num+item.subItem.length-1, c: 4 } }
        ];
        merges.push(...merges_item);
        for (let j = 0; j < item.subItem.length; j++) {
            let subItem = item.subItem[j];
            let tmp;
            if (j == 0) {
                tmp = [
                    item.num,
                    item.ImplementingInstitution,
                    item.ItemCategory,
                    item.ItemName,
                    item.Basis_for_Setting,
                    subItem.subNum,
                    subItem.subItemName,
                    subItem.Department
                ];
            } else {
                tmp = [
                    '',
                    '',
                    '',
                    '',
                    '',
                    subItem.subNum,
                    subItem.subItemName,
                    subItem.Department
                ];
            }
            data.push(tmp);
            col_num++;
        }
    }

    // 创建工作簿和工作表
    const ws = XLSX.utils.aoa_to_sheet(data);
    ws['!merges'] = merges;

    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // 导出文件
    XLSX.writeFile(wb, 'tableExport.xlsx');
}

onMounted(() => {
    loadFile(fileId);
});

</script>

<template>
    <div class="main">
        <div class="top-line">
            <div class="btn" @click="exportTableToExcel">导出excel文件</div>
        </div>
        <div class="table-box">
            <table border="1" cellspacing="0" style="margin: 0 auto;" id="myTable">
                <!-- 
                    此处要渲染的表格是包含合并单元格的，怎么写合适
                    数据结构为：
                    [{id: 1, content: '', subItem: [{subId: 1, content: ''}, {subId: 1, content: ''}]}]

                    我补充一下，我希望渲染成：
                    <tr><td rowspan="2">id</td><td rowspan="2">content</td><td>subItem[0].subId</td><td>subItem[0].content</td></tr>
                    <tr><td>subItem[1].subId</td><td>subItem[1].content</td></tr>
                -->
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>实施机构</th>
                        <th>事项类别</th>
                        <th>事项名称</th>
                        <th>设定依据</th>
                        <th>二级序号</th>
                        <th>二级事项名称</th>
                        <th>部门</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-for="item in table_data" :key="item.id">
                        <tr v-for="(subItem, index) in item.subItem" :key="subItem.subId">
                            <td v-if="index === 0" :rowspan="item.subItem.length">{{ item.num }}</td>
                            <td v-if="index === 0" :rowspan="item.subItem.length">{{ item.ImplementingInstitution }}</td>
                            <td v-if="index === 0" :rowspan="item.subItem.length">{{ item.ItemCategory }}</td>
                            <td v-if="index === 0" :rowspan="item.subItem.length">{{ item.ItemName }}</td>
                            <td v-if="index === 0" :rowspan="item.subItem.length">{{ item.Basis_for_Setting }}</td>
                            <td>{{ subItem.subNum }}</td>
                            <td>{{ subItem.subItemName }}</td>
                            <td>{{ subItem.Department }}</td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</template>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.top-line {
    display: flex;
    padding: 30px;
    border-bottom: 1px solid #9f9f9f;
}
.btn {
    height: auto;
    background-color: rgb(30, 111, 255);
    color: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: center;
}
.btn:hover {
    background-color: rgb(30, 98, 216);
}
.table-box {
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    overflow: auto;
}
</style>